<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>智慧校园</title>
  <!-- 引入资源 -->
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  </style>
  <link rel="stylesheet" href="./css/index.css">
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "62c0d051bb80ad16ee5f856e7f54b44e",
    };
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=a329219cdacef71b0addbc88034c9b39"></script>
</head>

<body>
  <div id="container"></div>
  <div class="info">点击地图标注热门地点</div>
  <script type="text/javascript">
    // 创建地图实例
    var map = new AMap.Map("container", {
      center: [114.402672, 30.518987],
      zoom: 16,
      viewMode: "3D",
      pitch: 45
    });
    // 控件
    AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar"], function () {
      map.addControl(new AMap.ToolBar());
      map.addControl(new AMap.Scale());
      map.addControl(new AMap.ControlBar());
    });
    // 地图点击事件
    map.on("click", function (e) {
      const marker = new AMap.Marker({
        position: e.lnglat
      });
      map.add(marker);
    });

  </script>
</body>

</html>